@import '../../assets/less/common.less';

.hm-page {
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &.order {
    background-color: #F9F7F7;
    min-height: 100vh;

    .page-bar-wrap {
      background-color: #fff;
    }
    .status-bar{
      width: 750rpx;
      // .hm-flex();
    }

    .order-list {
      .order-item {
        margin: 24rpx auto;
        width: 686rpx;
        min-height: 392rpx;
        background: #ffffff;
        border-radius: 8rpx;
        padding: 32rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: space-between;
        flex-direction: column;

        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .name {
            width: 520rpx;
            font-size: 28rpx;
            color: #333333;
            .hm-ellipsis();
          }

          .status {
            flex-shrink: 0;
            color: #F8903D;
            font-size: 24rpx;
          }
        }

        .body {
          flex: 1;
          padding: 20rpx 0;

          .good {
            // width: 144rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 160rpx;
            margin-top: 10rpx;

            .img {
              flex-shrink: 0;
              width: 144rpx;
              height: 160rpx;
              border: 2rpx solid #DCDCDC;
            }

            .name {
              padding: 0 20rpx;
              flex: 1;
              overflow: hidden;
              color: #333333;
              font-size: 28rpx;
              .hm-ellipsis-multiple(2);
              .sub{
                margin-top: 10rpx;
                color: #666666;
                font-size: 24rpx;
                .hm-ellipsis-multiple(2);
              }
            }

            .info {
              flex-shrink: 0;
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .money {
                display: flex;
                font-size: 28rpx;
                align-items: center;
                color: #333;

                .unit {
                  font-size: 14rpx;

                }
              }

              .count {
                margin-top: 8rpx;
                display: flex;
                font-size: 16rpx;
                color: rgba(0, 0, 0, 0.40);

              }
            }
          }
        }

        .footer {
          display: flex;
          flex-direction: row-reverse;

          .btn {
            width: 160rpx;
            height: 60rpx;
            .hm-flex();
            font-size: 24rpx;
            margin-left: 20rpx;

            &.cancel {
              border: 2rpx solid rgba(0, 0, 0, 0.40);
              color: rgba(0, 0, 0, 0.40);
              border-radius: 52rpx;
            }

            &.confirm {
              border: 2rpx solid #f8903d;
              color: #f8903d;
              border-radius: 52rpx;
            }

          }

        }
      }
    }

    .order-empty-wrap {
      flex-grow: 1;
      width: 100%;
      height: 100%;
      .hm-flex();
    }
  }
}